<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>立体文字</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200" style="background-color: #000000">
    糟糕 你的浏览器 我还搞不懂也？
</canvas>
<script>
    let draw = function () {
        let myCanvas = document.getElementById("myCanvas");
        let cxt = myCanvas.getContext("2d");
        let init = function (param) {
            if (param.globalAlpha > 0) {
                cxt.globalAlpha = param.globalAlpha;
            }
            cxt.fillStyle = param.color;
            cxt.font = param.font;
            cxt.fillText(param.text.content, param.text.x, param.text.y);
        }
        let param = [
            {color: '#0f0', font: "bold 90px Arial",globalAlpha: 0, text:{content: "立", x: 190, y: 90}},
            {color: '#0f0', font: "bold 70px Arial",globalAlpha: 0.7, text:{content: "体", x: 260, y: 90}},
            {color: '#0f0', font: "bold 50px Arial",globalAlpha: 0.6, text:{content: "感", x: 310, y: 90}},
            {color: '#0f0', font: "bold 30px Arial",globalAlpha: 0.5, text:{content: "文", x: 350, y: 90}},
            {color: '#0f0', font: "bold 20px Arial",globalAlpha: 0.4, text:{content: "字", x: 370, y: 90}},
            {color: '#0f0', font: "bold 70px Arial",globalAlpha: 0.7, text:{content: "体", x: 145, y: 90}},
            {color: '#0f0', font: "bold 50px Arial",globalAlpha: 0.6, text:{content: "感", x: 110, y: 90}},
            {color: '#0f0', font: "bold 30px Arial",globalAlpha: 0.5, text:{content: "文", x: 90, y: 90}},
            {color: '#0f0', font: "bold 20px Arial",globalAlpha: 0.4, text:{content: "字", x: 80, y: 90}},
        ];
        for (let i in param) {
            init(param[i]);
        }
    }
    draw();
</script>
</body>
</html>